<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户表单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body style="padding: 20px;">
    
    <!-- 表单内容 -->
    <form class="layui-form" lay-filter="userFormFilter" id="userForm">
        <input type="hidden" name="id" id="userId">
        
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="userName" placeholder="请输入姓名" class="layui-input" lay-verify="required">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="number" name="age" id="userAge" placeholder="请输入年龄" class="layui-input" lay-verify="required|number">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" id="userEmail" placeholder="请输入邮箱" class="layui-input" lay-verify="required|email">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男">
                <input type="radio" name="gender" value="女" title="女">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status" id="userStatus" lay-verify="required">
                    <option value="">请选择状态</option>
                    <option value="启用">启用</option>
                    <option value="禁用">禁用</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="submitBtn">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
            </div>
        </div>
    </form>

    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        console.log('表单页面加载完成');

        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]);
            return null;
        }

        // 获取操作类型和用户ID
        var action = getUrlParam('action');
        var userId = getUrlParam('userId');

        console.log('操作类型:', action, '用户ID:', userId);

        // 填充表单数据的函数
        function fillFormData(userData) {
            console.log('填充表单数据:', userData);
            
            $('#userId').val(userData.id);
            $('#userName').val(userData.name);
            $('#userAge').val(userData.age);
            $('#userEmail').val(userData.email);
            $('#userStatus').val(userData.status);
            
            // 设置单选框
            $('input[name="gender"][value="' + userData.gender + '"]').prop('checked', true);
            
            // 重新渲染表单
            form.render();
        }

        // 清空表单数据的函数
        function clearFormData() {
            $('#userId').val('');
            $('#userName').val('');
            $('#userAge').val('');
            $('#userEmail').val('');
            $('#userStatus').val('');
            $('input[name="gender"]').prop('checked', false);
            
            // 设置默认值
            $('input[name="gender"][value="男"]').prop('checked', true);
            
            form.render();
        }

        // 页面加载完成后的初始化
        $(document).ready(function() {
            console.log('DOM加载完成，开始初始化表单');
            
            if(action === 'edit' && userId) {
                // 编辑模式，获取并填充数据
                console.log('编辑模式，获取用户数据');
                
                // 确保父窗口的函数可用
                if(parent && parent.getUserById) {
                    var userData = parent.getUserById(userId);
                    console.log('获取到的用户数据:', userData);
                    
                    if(userData) {
                        setTimeout(function() {
                            fillFormData(userData);
                        }, 200); // 延时确保DOM完全加载
                    } else {
                        console.error('未找到用户数据');
                        layer.msg('未找到用户数据', {icon: 2});
                    }
                } else {
                    console.error('无法访问父窗口函数');
                    layer.msg('系统错误', {icon: 2});
                }
            } else {
                // 添加模式，清空表单并设置默认值
                console.log('添加模式，清空表单');
                setTimeout(function() {
                    clearFormData();
                }, 200);
            }
        });

        // 表单提交事件
        form.on('submit(submitBtn)', function(data){
            console.log('表单提交，数据:', data.field);
            
            var formData = data.field;
            
            // 验证必填字段
            if(!formData.name || !formData.age || !formData.email || !formData.gender || !formData.status) {
                layer.msg('请填写完整信息', {icon: 2});
                return false;
            }
            
            // 转换数据类型
            formData.age = parseInt(formData.age);
            
            console.log('处理后的表单数据:', formData);
            
            try {
                if(action === 'edit') {
                    // 修改操作
                    console.log('执行修改操作');
                    if(parent && parent.updateUser) {
                        parent.updateUser(formData);
                    } else {
                        throw new Error('无法访问父窗口的updateUser函数');
                    }
                } else {
                    // 添加操作
                    console.log('执行添加操作');
                    if(parent && parent.addUser) {
                        parent.addUser(formData);
                    } else {
                        throw new Error('无法访问父窗口的addUser函数');
                    }
                }
                
                // 关闭当前弹层
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                
            } catch(e) {
                console.error('提交失败:', e);
                layer.msg('提交失败: ' + e.message, {icon: 2});
            }
            
            return false; // 阻止表单跳转
        });

        // 重置按钮事件
        $('#resetBtn').on('click', function(){
            if(action === 'edit' && userId) {
                // 编辑模式重置为原始数据
                var userData = parent.getUserById(userId);
                if(userData) {
                    fillFormData(userData);
                }
            } else {
                // 添加模式清空表单
                clearFormData();
            }
        });

        // 取消按钮事件
        $('#cancelBtn').on('click', function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    });
    </script>
</body>
</html>